<template>
	<div class="container">
		<cl-crud @load="onLoad">
			<!-- 添加记录 -->
			<template #slot-add>
				<el-button
						size="mini"
						type="primary"
						@click="addRecord()"
						v-permission="$service.goodsMenagement.record.permission.add"
				>
					<i class="el-icon-plus"></i>添加记录
				</el-button>
			</template>
			<template #slot-filter>
				<div>
					<el-select
							size="mini"
							filterable
							placeholder="帐号筛选"
							v-model="accountFilter"
							style="margin-right: 1em;width:200px;"
							@change="val => crud.refresh({ appkey: val, page: 1 })"
					>
						<el-option value=" " label="全部"></el-option>
						<el-option
								v-for="item in accountFilterList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
						></el-option>
					</el-select>
				</div>

				<div>
					<el-select
							size="mini"
							filterable
							placeholder="活动类型"
							v-model="state"
							style="margin-right: 1em;width:120px;"
							@change="val => crud.refresh({ activityType: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option label="百亿补贴" :value="1"></el-option>
						<el-option label="大转盘" :value="2"></el-option>
					</el-select>
				</div>
				<div class="nav base-flex" style="margin-right:10px">
					<div>
						<date-picker
								@change="
								val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
								@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
				</div>
			</template>
			<!-- 淘礼金信息 -->
			<template #table-column-info="{scope}">
				<div class="info">
					<p>
						标题：
						<span>{{ scope.row.tljName }}</span>
					</p>
					<p>
						总数：
						<span>{{ scope.row.totalNum }}</span>
					</p>
					<p>
						领取次数：
						<span>{{ scope.row.userTotal }}</span>
					</p>
					<p>
						单个金额：
						<span>￥{{ scope.row.perface }}元</span>
					</p>
					<p>
						创建类型：
						<span>{{ scope.row.type | typeFilter }}</span>
					</p>
					<p>
						开始时间：
						<span>{{ scope.row.startTime | dateFormatLine }}</span>
					</p>
					<p>
						结束时间：
						<span>{{ scope.row.endTime | dateFormatLine }}</span>
					</p>
				</div>
			</template>
			<!-- 商品信息 -->
			<template #table-column-goodsInfo="{scope}">
				<div class="goodsInfo-box">
					<div class="info-img">
						<a :href="scope.row.link" target="_black">
							<img :src="scope.row.pic | image_ali" alt="" />
						</a>
					</div>
					<div class="info">
						<div class="info-box" v-if="scope.row.link">
							<img
									:src="scope.row.productPicUrl"
									alt
									class="goodsInfo-img"
									v-if="scope.row.productPicUrl"
							/>
							<div class="title-box">
								<div class="name">
									<a
											:href="scope.row.link"
											target="_blank"
											class="titel"
											v-if="scope.row.title"
									>
										{{ scope.row.title }}
									</a>
									<i
											class="el-icon-copy-document"
											v-copy="scope.row.title"
											title="复制商品名称"
									></i>
								</div>

								<p class="shop" v-if="scope.row.shopName">
									{{ scope.row.shopName }}
								</p>
							</div>
						</div>
						<p>
							商品ID：{{ scope.row.gid }}
							<i
									class="el-icon-copy-document"
									v-copy="scope.row.gid"
									title="复制商品ID"
							></i>
						</p>
						<p>
							优惠券ID：{{ scope.row.activityId }}
							<i
									class="el-icon-copy-document"
									v-copy="scope.row.activityId"
									title="复制优惠券ID"
							></i>
						</p>
					</div>
				</div>
			</template>
			<!-- 任务时间 -->
			<template #table-column-taskTime="{scope}">
				<div class="info info-time">
					<div>
						<div v-if="scope.row.scheduleTime">
							定时时间：{{ scope.row.scheduleTime | dateFormatLine }}
						</div>
						<div v-else>定时时间：未设置</div>
					</div>

					<div>
						<div v-if="scope.row.updateTime">
							执行时间：{{ scope.row.updateTime | dateFormatLine }}
						</div>
						<div v-else>
							执行时间：未设置
						</div>
					</div>
					<div v-if="scope.row.newPerson == 1">
						<div>
							<div>免单开始时间：{{ scope.row.xrStartTime | dateFormatLine }}</div>
						</div>

						<div>
							<div>免单结束时间：{{ scope.row.xrEndTime | dateFormatLine }}</div>
						</div>
					</div>
				</div>
			</template>
			<!-- 表格行 复制淘口令 -->
			<template #table-column-tkl="{scope}">
				<div class="info">
					<p>
						{{ scope.row.tkl || '无' }}
						<i
								class="el-icon-copy-document"
								v-copy="scope.row.tkl"
								v-if="scope.row.tkl"
								title="复制淘口令"
						></i>
					</p>
				</div>
			</template>
			<!-- 创建时间 -->
			<template #table-column-createTime="{scope}">
				<div>{{ scope.row.createTime | dateFormatLine }}</div>
			</template>
			<template #slot-row-copy="{scope}">
				<div class="copy" v-if="scope.row.tljCommunity === 1">
					<el-tooltip :content="scope.row.title" placement="top">
						<el-button
								type="text"
								size="small"
								@click="copyTkl(scope.row)"
						>复制淘口令</el-button
						>
					</el-tooltip>
				</div>
			</template>
			<!--  社群淘礼金-->
			<template #slot-row-tljCommunity="{scope}">
				<div class="record-detail">
					<span
							style="color:red"
							@click="cancleTljCommunity(scope.row)"
							v-if="scope.row.tljCommunity == 1"
					>取消社群淘礼金</span
					>
					<span @click="tljCommunity(scope.row)" v-else>设为社群淘礼金</span>
				</div>
			</template>
			<!-- 是否下架 -->
			<template #table-column-recordStatus="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<!--			是否抢完-->
			<template #table-column-unReceiveStatusNum2="{scope}">
				<div>
					<el-tag v-if="scope.row.unReceiveStatusNum > 0" type="success">未抢完</el-tag>
					<el-tag type="info" v-else>已抢完</el-tag>
				</div>
			</template>
			<!-- 跳转详情 -->
			<template #slot-row-tljdetail="{scope}">
				<div class="record-detail" v-if="scope.row.batchId">
					<span @click="batchIdDetail(scope.row)">查看详情</span>
				</div>
			</template>
			<!-- 活动类型 -->
			<template #table-column-activityType="{scope}">
				<el-tag v-if="scope.row.activityType == 1">百亿补贴</el-tag>
				<el-tag v-else-if="scope.row.activityType == 2">大转盘</el-tag>
			</template>
		</cl-crud>
		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
	import moment from 'moment';
	import DatePicker from '@/components/common/date-picker';
	import { Type_TLJ, Task_Status } from '@/dict/index';
	// eslint-disable-next-line
	import searchCounpon from '../components/list/searchCoupon';
	import stores from '@/utils/store';

	export default {
		data() {
			return {
				crud: null,
				state: '',
				options: {
					account: []
				},
				defNumMax: 1,
				memoryAccount: '',
				accountFilter: '',
				accountFilterList: []
			};
		},
		components: {
			// eslint-disable-next-line
			searchCounpon,
			DatePicker
		},

		created() {
			this.options.status = Task_Status;
		},

		computed: {
			toDayTime() {
				console.log(new Date().getTime() / 1000);
				return new Date().getTime() / 1000;
			}
		},
		methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.goodsMenagement.record)
						.set('dict', {
							search: {
								query: 'status'
							},
							api: {
								delete: 'deleteByBatch'
							}
						})
						.set('tips', {
							delete: {
								confirm: '此操作会将本商品在新人免单列表删除，是否继续？',
								success: '取消成功',
								error: ''
							}
						})
						.set('upsert', {
							props: {
								width: '700px',
								labelWidth: '150px',
								center: true,
								'custom-class': 'custom-class-dialog'
							},
							items: [
								{
									component: {
										name: 'base-info',

										render() {
											return (
													<p style="margin-left: -120px;border-left:5px solid #FF4400;line-height: 16px;padding-left: 8px;">
													基础信息{' '}
										<span style="color:red">
													{' '}
												！
												淘礼金抓取需要1~n秒刷新页面即可看到新增商品(n=礼金个数)
											</span>
											</p>
										);
										}
									}
								},
								{
									prop: 'accountId',
									label: '账号',
									span: 13,
									component: {
										name: 'el-select',
										options: [],
										attrs: {
											placeholder: '请选择账号'
										},
										on: {
											change(val) {
												self.memoryAccount = val;
											}
										}
									},
									rules: {
										required: true,
										message: '账号不能为空'
									}
								},

								{
									prop: 'type',
									label: '创建类型',
									span: 10,
									value: 2,
									component: {
										name: 'el-select',
										attrs: {
											placeholder: '请选择'
										},
										props: {
											clearable: true
										},
										options: Type_TLJ
									},
									rules: {
										required: true,
										message: '创建类型不能为空'
									}
								},
								{
									prop: 'pic',
									label: '商品主图：',
									span: 24,
									component: {
										name: 'cl-upload'
									}
								},
								{
									prop: 'title',
									label: '商品标题',
									span: 24,
									component: {
										name: 'el-input',
										attrs: {
											size: 'mini'
										}
									}
								},
								{
									prop: 'url',
									props: {
										labelWidth: '0px'
									},
									// label: '优惠券链接：',
									component: {
										name: 'search-counpon',
										methods: {
											input(e) {
												this.$emit('input', e);
											},
											goodsInfo(e) {
												app.setForm('tljName', e.title.substring(0, 10));
											},
											perface(e) {
												app.setForm('perface', e);
											}
										},
										render() {
											return (
													<searchCounpon
											labelWidth="150"
											onInput={this.input}
											ongoodsInfo={this.goodsInfo}
											onperface={this.perface}
											item={self.enterGoodsInfo}></searchCounpon>
										);
										}
									},
									rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
								},
								{
									prop: 'tljName',
									label: '淘礼金名称',
									component: {
										name: 'el-input',
										attrs: {
											placeholder: '请输入名称',
											clearable: true,
											maxlength: 10
										}
									},
									rules: [
										{
											required: true,
											message: '淘礼金名字不能为空'
										},
										{
											min: 5,
											max: 10,
											message: '淘礼金名字在5 ~ 10个字符之间'
										}
									]
								},
								{
									component: {
										name: 'setting',

										render() {
											return (
													<p style="margin-left: -120px;border-left:5px solid #FF4400;line-height: 16px;padding-left: 8px;">
													设置
													</p>
										);
										}
									}
								},
								{
									prop: 'totalNum',
									label: '淘礼金个数',
									span: 12,
									component: {
										name: 'el-input-number',
										props: {
											min: 0
										}
									},
									rules: {
										required: true,
										message: '总金额不能为空'
									}
								},
								{
									prop: 'userTotal',
									value: 1,
									label: '单用户最多领多少次',
									span: 12,
									component: {
										name: 'el-input-number',
										props: {
											min: 0
										}
									},
									rules: {
										required: true,
										message: '最多领取数量不能为空'
									}
								},
								{
									prop: 'perface',
									label: '单个淘礼金金额',

									// value: this.$store.getters.recordObj.perface,
									component: {
										name: 'el-input-number',
										props: {
											min: 1
										}
									},
									rules: {
										required: true,
										message: '单金额不能为空'
									}
								},
								{
									prop: 'activityType',
									label: '活动类型',
									span: 12,
									component: {
										name: 'el-select',
										props: {
											clearable: true
										},
										options: [
											// {
											// label: '百亿补贴',
											// value: 1
											// },
											{
												label: '大转盘',
												value: 2
											}
										]
									}
								},
								// {
								// 	prop: 'newPerson',
								// 	label: '是否新人专享',
								// 	component: {
								// 		name: 'el-switch'
								// 	}
								// },
								// {
								// 	prop: 'time',
								// 	label: '新人专享时间',
								// 	span: 24,
								// 	// value: [
								// 	// 	moment().format('YYYY-MM-DD HH:mm:ss'),
								// 	// 	moment()
								// 	// 		.add(1, 'day')
								// 	// 		.format('YYYY-MM-DD HH:mm:ss')
								// 	// ],
								// 	component: {
								// 		name: 'el-date-picker',
								// 		props: {
								// 			type: 'datetimerange',
								// 			'value-format': 'yyyy-MM-dd HH:mm:ss'
								// 		}
								// 	}
								// },
								{
									prop: 'startTime',
									label: '淘礼金开始时间',
									span: 14,
									component: {
										name: 'el-date-picker',
										props: {
											type: 'datetime',
											'value-format': 'yyyy-MM-dd HH:mm:ss'
										}
									},
									rules: [
										{
											required: true,
											message: '开始时间不能为空',
											trigger: 'blur'
										},
										{
											validator: (rules, value, callback) => {
												const h = app.getData('upsert.form.hour') || 0;

												if (
														moment(value)
																.add(h, 'hour')
																.isBefore(moment())
												) {
													callback(new Error('开始时间不能小于当前时间'));
												} else {
													callback();
												}
											}
										}
									]
								},
								{
									prop: 'hour',
									label: '持续时间（h）',
									span: 10,
									value: 24,
									component: {
										name: 'el-input-number',
										props: {
											min: 0
										}
									},
									rules: {
										required: true,
										message: '持续时间不能为空',
										trigger: 'blur'
									}
								},
								{
									prop: 'scheduleTime',
									label: '淘礼金创建时间',
									component: {
										name: 'el-date-picker',
										props: {
											type: 'datetime',
											'value-format': 'yyyy-MM-dd HH:mm:ss'
										}
									},
									rules: [
										{
											required: false,
											message: '定时时间不能为空'
										},
										{
											validator: (rules, value, callback) => {
												if (moment(value).isBefore(moment())) {
													callback(new Error('定时时间不能小于当前时间'));
												} else {
													callback();
												}
											}
										}
									]
								}
							],
							op: {
								layout: ['confirm']
							}
						})
						.set('table', {
							columns: [
								{
									type: 'index',
									label: '序号',
									align: 'center',
									width: '60'
								},
								{
									label: '创建时间',
									prop: 'createTime',
									align: 'center',
									'min-width': 160,
									sortable: true
								},
								{
									label: '淘礼金信息',
									prop: 'info',
									align: 'left',
									'min-width': 250
								},
								{
									label: '商品信息',
									prop: 'goodsInfo',
									align: 'left',
									'min-width': 300
								},
								{
									label: '任务时间',
									prop: 'taskTime',
									align: 'center',
									'min-width': 250
								},
								{
									label: '联盟号',
									prop: 'account',
									align: 'center',
									width: 150
								},
								{
									label: '活动类型',
									prop: 'activityType',
									align: 'center',
									width: 110
								},
								{
									label: '是否下架',
									prop: 'recordStatus',
									align: 'center'
								},
								// {
								// 	label: '淘口令',
								// 	prop: 'tkl',
								// 	align: 'center',
								// 	'min-width': 130
								// },
								{
									label: '总数',
									prop: 'totalNum',
									align: 'center',
									'min-width': 100
								},
								{
									label: '剩余',
									prop: 'unReceiveStatusNum',
									align: 'center',
									'min-width': 100
								},
								{
									label: '已领取',
									prop: 'receiveStatusNum',
									align: 'center',
									'min-width': 100
								},
								{
									label: '生成成功',
									prop: 'statusSuccessNum',
									align: 'center',
									'min-width': 100
								},
								{
									label: '是否抢完',
									prop: 'unReceiveStatusNum2',
									align: 'center',
									'min-width': 100
								},
								{
									label: '生成中',
									prop: 'statusHandleNum',
									align: 'center',
									'min-width': 100
								},
								{
									label: '生成失败',
									prop: 'statusFailNum',
									align: 'center',
									'min-width': 100
								}
							],
							props: {
								'default-sort': {
									order: 'descending',
									prop: 'createTime'
								}
							},
							op: {
								layout: [
									'slot-row-tljdetail',
									'slot-row-copy',
									'slot-row-tljCommunity'
								]
							}
						})
						.set('layout', [
							[
								'refresh-btn',
								'slot-add',
								'flex1',
								'slot-filter',
								'slot-export',
								'search-key'
							],
							['data-table'],
							['flex1', 'pagination']
						])
						.on('refresh', async (params, { next }) => {
							let list = [];
							list = await this.$service.goodsMenagement.getTljAccountList.list();
							list = list.map(item => {
								return {
									label: item.account,
									value: item.appkey
								};
							});
							this.accountFilterList = list;
							next(params);
						})
						.on('open', async () => {
							let list = [];
							list = await this.$service.goodsMenagement.taobaoAccountTlj.userAccountList();
							list = list.map(item => {
								return {
									label: item.accountName,
									value: item.accountId
								};
							});
							this.crud.setForm(
									'totalNum',
									Math.floor(Math.random() * (10000 - 5000 + 1) + 5000)
							); // 随机设置淘礼金个数
							this.crud.setData('upsert.items[prop:accountId].component.options', list);
							if (stores.get('subsidyObj')) {
								app.setForm('accountId', stores.get('recordObj').accountId);
								app.setForm('totalNum', stores.get('recordObj').totalNum);
								app.setForm('userTotal', stores.get('recordObj').userTotal);
							} else {
								if (self.memoryAccount) {
									app.setForm('accountId', self.memoryAccount);
								} else {
									app.setForm('accountId', list[0].value);
								}
							}
							app.setForm(
									'startTime',
									moment(new Date().getTime() + 86400000).format('YYYY-MM-DD 00:00:00')
							);
						})
						.on('submit', (isEdit, data, { next }) => {
							let obj = {};
							obj.accountId = data.accountId;
							obj.totalNum = data.totalNum;
							obj.userTotal = data.userTotal;
							stores.set('recordObj', obj);
							let accid = data.accountId.split(':');
							next({
								...data,
								...data.url,
								endTime: moment(data.startTime)
										.add(data.hour, 'hour')
										.format('YYYY-MM-DD HH:mm:ss'),
								...app.getData('upsert.form.goodsInfo'),
								xrStartTime: data.time ? data.time[0] : '',
								xrEndTime: data.time ? data.time[1] : '',
								app: accid[0],
								accountId: accid[1],
								tljC: 1
								// newPerson: data.newPerson == 1 ? 1 : 0
							});
						})
						.on('delete', (selection, { next }) => {
							next({
								batchId: selection.map(e => e.batchId).join(','),
								gid: selection.map(e => e.gid).join(',')
							});
						})
						.done();

				app.refresh({
					tljC: 1
				});
			},

			refresh(params) {
				this.crud.refresh(params);
			},
			// 添加记录
			addRecord() {
				this.crud.add();
			},
			// 查看批量详情
			batchIdDetail(item) {
				this.$emit('showdetail', item);
			},
			// 设为社群淘礼金商品
			tljCommunity(item) {
				const self = this;
				this.$refs['cl-form'].open({
							props: {
								'label-width': '120px',
								width: '700px',
								center: true,
								'custom-class': 'custom-class-dialog-mini'
							},
							items: [
								{
									prop: 'gid',
									label: '商品ID：',
									span: 24,
									value: item.gid,
									component: <div>{item.gid}</div>
						},
						{
							prop: 'title',
							label: '商品标题：',
							span: 24,
							value: item.title,
							component: <div>{item.title}</div>
			},
				{
					prop: 'mdMoney',
							label: '补贴金额：',
						value: 0,
						component: {
					name: 'mdMoney_c',
							data() {
						return {
							value2: 0,
							preCommission: ''
						};
					},
					created() {
						this.$service.goodsMenagement.goods
								.getPreCommission({
									endPrice: item.endPrice,
									commissionRate: item.commissconRate,
									tljMoney: item.perface
								})
								.then(res => {
									this.preCommission = res;
								});
					},
					methods: {
						Change(e) {
							this.$emit('input', e);
						}
					},

					render() {
						return (
								<div style="display:flex">
								<el-input-number
						max={
							Number(item.endPrice) -
								parseFloat(item.perface || 0) || 0
					}
						step={0.01}
						min={0}
						v-model={this.value2}
						onChange={this.Change}></el-input-number>
								<div style="margin-left:10px">
								淘礼金￥
								<span style="color:red">{item.perface}</span>元
								</div>
								<div style="margin-left:10px">
								到手价格￥
								<span style="color:red">
								{(
										parseFloat(item.endPrice || 0) -
										parseFloat(item.perface || 0) -
										(this.value2 ? this.value2 : 0)
								).toFixed(2)}
					</span>
						元
						</div>
						<div style="margin-left:10px">
								参考佣金￥
								<span style="color:red">{this.preCommission}</span>元
								</div>
								</div>
					);
					}
				},
					rules: [
						{
							required: true,
							message: '补贴金额不能为空'
						}
					]
				},
				{
					prop: 'time',
							label: '开始时间',
						span: 24,
						value: [
					moment().format('YYYY-MM-DD HH:mm:ss'),
					moment()
							.add(1, 'day')
							.format('YYYY-MM-DD HH:mm:ss')
				],
						component: {
					name: 'el-date-picker',
							props: {
						type: 'datetimerange',
								'value-format': 'yyyy-MM-dd HH:mm:ss'
					}
				},
					rules: [
						{
							required: true,
							message: '请选择淘礼金开始-结束时间',
							trigger: 'blur'
						}
					]
				}
			],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.record
								.setNewPersonFreeGoods({
									...item,
									startTime: data.time[0],
									endTime: data.time[1],
									url: item.link,
									couponUrl: item.couponUrl,
									tljBatchId: item.batchId,
									tljMoney: item.perface,
									type: 6,
									mdMoney: data.mdMoney
								})
								.then(() => {
									self.$message({
										message: '设置成功',
										type: 'success'
									});
									self.crud.refresh();
									close();
									return;
								})
								.catch(err => {
									self.$message.error(err);
								});
					}
				}
			});
			},
			// 取消淘礼金红包商品
			cancleTljCommunity(item) {
				this.$service.goodsMenagement.mdGoods
						.cancelByBatchId({
							gid: item.gid,
							batchId: item.batchId,
							mdTljCommunityGoodsId: item.mdTljCommunityGoodsId,
							dayAllowanceStartTime: item.dayAllowanceStartTime,
							status: 2
						})
						.then(() => {
							this.$message({
								message: '取消成功',
								type: 'success'
							});
							this.crud.refresh();
							return;
						})
						.catch(err => {
							self.$message.error(err);
						});
			},
			copyTkl(item) {
				this.$service.goodsMenagement.record
						.privilege({
							itemId: item.gid,
							title: item.title
						})
						.then((res) => {
							this.$copyText(res.tkl).then(() => {
										this.$message.success('复制成功');
									}, () => {
										this.$message.success('复制失败');
									}
							);
						})
						.catch(err => {

						});
			}
		},
		filters: {
			// 解析创建类型
			typeFilter(val) {
				return Type_TLJ.filter(item => item.value == val)[0].label;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
	}
	.info-time {
		text-align: left;
	}
	.goodsInfo-box {
		display: flex;
		align-items: center;
		width: 100%;
		.info-img {
			width: 94px;
			height: 94px;
			flex-shrink: 0;
			border-radius: 10px;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
			}
		}
		// img {
		// 	width: 50px;
		// 	height: 50px;
		// 	/*border-radius: 50%;*/
		// 	flex-shrink: 0;
		// }
		.info {
			width: calc(100% - 100px);
			margin-left: 10px;
		}

		.info-box {
			margin: 10px 0;
			display: flex;
			align-items: center;
			.img-box {
				width: 500px;
				height: 500px;
				img {
					max-height: 100%;
					max-width: 100%;
				}
			}
			.title-box {
				flex: 1;
				height: 50px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				overflow-x: hidden;
				.name {
					display: flex;
					align-items: center;
					a {
						font-size: 12px;
						width: 90%;
						color: $main-color;
						cursor: pointer;
						@include ellipsis(1);
					}
				}
			}
		}
	}
	.info {
		span {
			color: $main-color;
		}
		i {
			color: $main-color;
			cursor: pointer;
			font-size: 14px;
		}
	}
	.export {
		margin-right: 10px;
	}
	.record-detail {
		display: flex;
		justify-content: center;
		align-items: center;
		span {
			color: #4db7f3;
			border-radius: 50px;
			margin-bottom: 5px;
			cursor: pointer;
			display: block;
			padding: 4px 14px;
			transition: 0.3s;
			&:hover {
				opacity: 0.8;
			}
		}
	}
	::v-deep .el-dialog {
		.el-form {
			.el-col {
				.el-col-8 {
					.el-form-item__label {
						width: 120px !important;
					}
				}
			}
		}
	}

	::v-deep .el-select {
		margin-left: 10px;
	}
</style>
